<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙——连接数据库版本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 400px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            padding: 20px 0;
        }

        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
        }

        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        span {
            width: 100px;
            line-height: 40px;
        }

        .edit {
            width: 200px;
            height: 30px;
        }

        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }

        .submit:active {
            background-color: #666;
        }

    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>

<body>
<div id="container" class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input id="from" class="edit" type="text">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input id="to" class="edit" type="text">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input id="message" class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit" onclick="mySubmit()">
    </div>
    <div id="allMsg">
        <!-- <div class="row">
            小猫对小狗说: 喵
        </div>
        <div class="row">
            小黑对小白说: 拜拜。
        </div> -->
    </div>
</div>
<script>
    // 添加表白信息
    function mySubmit(){
       var from = jQuery("#from");
       var to = jQuery("#to");
       var msg = jQuery("#message");
       // todo:1.非空效验
       // 2.ajax 提交数据给后端
       jQuery.ajax({
         url:"message/add2",   // 提交到后端的地址
         type:"POST", // 提交类型
         data:{
            from:from.val(),
            to:to.val(),
            msg:msg.val()
         }, // 参数
         success:function(result){ // 后端返回给前端的数据
            if(result!=null && result>0){
                alert("恭喜：添加成功！");
                // 刷新表白列表
                getAllMsg();
            }else{
              alert("抱歉：添加失败，请重试！");
            }
         }
       });
    }

    // 查询所有的表白信息
    function getAllMsg(){
        jQuery.ajax({
            url:"message/list2",
            type:"GET",
            data:{},
            success:function(result){
                if(result!=null && result.length>0){
                    // 表示有表白数据
                    var msgHtml = "";
                    for(var i=0;i<result.length;i++){
                        msgHtml +='<div class="row">'+
                            result[i].from +'对'+
                            result[i].to+'说: '+
                            result[i].message+'</div>';
                    }
                    jQuery("#allMsg").html(msgHtml);
                }else if(result!=null && result.length==0){
                    // 没有表白数据
                    console.log("没有表白信息");
                }else{
                    alert("访问出错！");
                }
            }
        });
    }
    getAllMsg(); // 执行方法

</script>
</body>
</html>